<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>边框</title>
    <style>

        .box{
           width: 298px;                 /* 盒子宽度298px*/
            border:1px solid #3a6587;
			margin: auto;
			  /* 设置盒子边框*/
        }
			
		body,h2{
			margin: 0;
		}
        h2{
            font-size:16px;
            background-color:#3a6587;
            height:35px;
            line-height:35px;
            color:#FFF;
			padding: -left:20psx;
        }

        form{
             background: #c8ece3;
         }
        div:nth-of-type(1) input{
            border: 3px solid black;     /* 第一个div下面的input元素设置边框3px 实线 黑色*/
        }
        div:nth-of-type(2) input{
            border: 1px dashed red;  /* 第二个div下面的input元素设置边框1px 虚线 红色*/
        }
        div:nth-of-type(3) input{
            border: 2px dotted red;   /* 第三个div下面的input元素设置边框2px 点线 红色*/
        }
    </style>
</head>
<body>

<div class="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <strong class="name">姓名：</strong>
            <input type="text"/>
        </div>
        <div>
            <strong class="name">邮箱：</strong>
            <input type="text"/>
        </div>
        <div>
            <strong class="name">电话：</strong>
            <input type="text"/>
        </div>

    </form>
</div>
</body>
</html>